<script setup>
import {ref} from "vue";

const manageType = ref('view');

const changeType = (type) => {
  manageType.value = type;
}

const formModal = ref({
  name: '',
  username: '',
  sex: '',
  phone: '',
  email: '',
  origin: '',
  note: ''
});

// 重置表单
const resetForm = () => {
  formModal.value = {
    name: '',
    username: '',
    sex: '',
    phone: '',
    email: '',
    origin: '',
    note: ''
  }
}
</script>

<template>
  <div class="index_view">
    <div class="title">用户管理</div>
    <div class="option_box">
      <div class="view_user" :class="manageType==='view'?'active':''"
           @click="changeType('view')">查看用户
      </div>
      <div class="add_user" :class="manageType==='add'?'active':''"
           @click="changeType('add')">添加用户
      </div>
    </div>
    <div class="main_box">
      <div v-if="manageType==='view'">
        <el-table :data="tableData" :header-cell-style="{backgroundColor:'#fafafa',height:'50px',color:'black'}">
          <el-table-column type="index" label="编号" width="120"/>
          <el-table-column prop="username" label="用户名"/>
          <el-table-column prop="name" label="姓名"/>
          <el-table-column prop="sex" label="性别"/>
          <el-table-column label="操作" style="user-select: none">
            <template #default="scope">
              <span style="color: #1990ff;cursor: pointer">编辑</span>
              &nbsp;<span style="color: #d9d9d9">|</span>&nbsp;
              <span style="color: #e51c23;cursor: pointer">删除</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination_container">
          <el-pagination background layout="prev, pager, next" :total="1000"/>
        </div>
      </div>
      <div v-if="manageType==='add'">
        <el-form :model="formModal" label-width="auto" style="max-width: 600px">
          <el-form-item label="姓名">
            <el-input v-model="formModal.name" placeholder="请输入姓名"/>
          </el-form-item>
          <el-form-item label="用户名">
            <el-input v-model="formModal.username" placeholder="请输入用户名"/>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="formModal.sex">
              <el-radio value="男">男</el-radio>
              <el-radio value="女">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="formModal.phone" placeholder="请输入联系电话"/>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="formModal.email" placeholder="请输入电子邮箱"/>
          </el-form-item>
          <el-form-item label="籍贯">
            <el-input v-model="formModal.origin" placeholder="请输入籍贯"/>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="formModal.note" placeholder="输入备注信息"
                      show-word-limit maxlength="250" type="textarea" rows="6"/>
          </el-form-item>
          <el-form-item style="padding-left: 65px">
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="resetForm()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.index_view {
  width: 100%;
  height: 100%;

  .title {
    width: 100%;
    height: 50px;
    color: #909090;
    background-color: #f0f0f2;
    line-height: 50px;
    font-size: 16px;
    padding-left: 20px;
  }

  .option_box {
    width: 100%;
    height: 60px;
    padding: 0 20px;
    border-bottom: 2px solid #d9d9d9;
    display: flex;

    .view_user, .add_user {
      margin-top: 5px;
      height: 55.5px;
      width: 100px;
      line-height: 60px;
      text-align: center;
      color: #606060;
      font-size: 14px;
      cursor: pointer;
    }

    .active {
      color: var(--el-color-primary);
      border-bottom: 3px solid var(--el-color-primary);
    }
  }

  .main_box {
    margin-top: 20px;
    padding: 0 20px;

    :deep(.el-table .cell) {
      text-align: center;
    }

    .pagination_container {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 50px;
    }

    .el-form{
      max-height: 520px;
      overflow: auto;
    }
  }
}
</style>